<script setup lang="ts">
import { ref, h, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Typography, Card, Input, Button, message, Row, Col } from 'ant-design-vue';
import { SendOutlined } from '@ant-design/icons-vue';
import AppListView from '@/components/AppListView.vue';
import { addApp } from '@/api/appController';
import { useUserStore } from '@/stores/user';

const { Title, Paragraph } = Typography;
const router = useRouter();
const userStore = useUserStore();

// 用户输入的提示词
const userPrompt = ref('');

// 创建应用加载状态
const loading = ref(false);

// 刷新列表的标志
const refreshFlag = reactive({ 
  my: 0,
  good: 0 
});

// 处理用户提示词提交
const handleSubmit = async () => {
  if (!userPrompt.value.trim()) {
    message.warning('请输入提示词');
    return;
  }
  if (!userStore.loginUser.id) {
    message.warning('请先登录');
    router.push('/user/login');
    return;
  }
  loading.value = true;
  try {
    const res = await addApp({ initPrompt: userPrompt.value.trim() });
    if (res.data?.code === 0 && res.data?.data) {
      const appId = res.data.data;
      message.success('应用创建成功');
      userPrompt.value = '';
      router.push({ path: `/chat/${appId}`, query: { newApp: 'true' } });
    } else {
      message.error(res.data?.message || '创建应用失败');
    }
  } catch (error) {
    console.error('创建应用失败', error);
    message.error('创建应用失败，请稍后再试');
  } finally {
    loading.value = false;
  }
};

const handlePressEnter = () => { handleSubmit(); };

// 处理刷新应用列表
const handleRefreshMyApps = () => { refreshFlag.my += 1; };
const handleRefreshGoodApps = () => { refreshFlag.good += 1; };
</script>

<template>
  <div class="home-container">
    <div class="hero-section">
      <div class="hero-content">
        <Title :level="2" class="hero-title">AI网站生成器</Title>
        <Paragraph class="hero-description">输入您的需求，AI将为您创建完整的网站应用</Paragraph>
        <div class="prompt-input-container">
          <div class="prompt-input-wrapper">
            <Input.TextArea v-model:value="userPrompt" placeholder="例如：创建一个在线书店网站，包含图书展示、购物车和用户评价功能..." :rows="3" :maxlength="500" showCount @pressEnter="handlePressEnter" :disabled="loading" />
          </div>
          <div class="submit-button-wrapper">
            <Button type="primary" size="large" class="submit-button" :loading="loading" @click="handleSubmit">
              <template #icon><SendOutlined /></template>
              创建应用
            </Button>
          </div>
        </div>
      </div>
    </div>

    <!-- 精选应用列表（置顶） -->
    <AppListView 
      type="good" 
      title="精选应用" 
      :key="`good-apps-${refreshFlag.good}`"
      @refresh="handleRefreshGoodApps"
    />

    <!-- 我的应用列表（下方） -->
    <AppListView 
      type="my" 
      title="我的应用" 
      :key="`my-apps-${refreshFlag.my}`"
      @refresh="handleRefreshMyApps"
    />
  </div>
</template>

<style scoped>
.home-container { width: 100%; }
.hero-section { margin-bottom: 36px; background: linear-gradient(135deg, #1668dc20, #1668dc10); border-radius: 12px; padding: 40px; }
.hero-content { max-width: 800px; margin: 0 auto; }
.hero-title { text-align: center; margin-bottom: 16px !important; background: linear-gradient(135deg, #1668dc, #096dd9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-description { text-align: center; font-size: 16px; margin-bottom: 32px !important; }
.prompt-input-container { display: flex; flex-direction: column; gap: 16px; }
.prompt-input-wrapper { width: 100%; }
.submit-button-wrapper { display: flex; justify-content: center; }
.submit-button { min-width: 140px; height: 46px; border-radius: 8px; font-size: 16px; }
@media (max-width: 768px) {
  .hero-section { padding: 24px 16px; }
  .hero-title { font-size: 24px; }
  .hero-description { font-size: 14px; }
}
</style> 